<template>
  <f7-page class="bookshelf">
    <f7-navbar>
      <f7-nav-title>追小说</f7-nav-title>
      <f7-nav-right>
        <f7-link icon-if-ios="f7:search" icon-if-md="material:search" panel-open="right"></f7-link>
        <f7-link icon-if-ios="f7:person" icon-if-md="material:person" panel-open="right"></f7-link>
      </f7-nav-right>
    </f7-navbar>

    <f7-toolbar tabbar>
      <f7-link tab-link="#tab1">书架</f7-link>
      <f7-link tab-link="#tab2">发现</f7-link>
    </f7-toolbar>
    <f7-tabs animated>
      <f7-tab id="tab1" tab-active>
        <f7-list media-list
                 virtual-list
                 :virtual-list-params="{ theData: theData }"
        >
          <f7-list-item
            v-for="(item,index) in theData"
            :link="`/bookdetail?bookid=${item.bookid}`"
            :key="index"
            media-item
            :title="item.name" :subtitle="`最新更新: ${item.lastChapterName}`" :text="item.lastChapterUpdateTime" badge="更新" badge-color="red"
            swipeout
            @swipeout:deleted="onSwipeoutDel(item.bookid)"
          >
            <img :src="item.surface"  slot="media" style="width: 45px;height: 60px;">
          </f7-list-item>


        </f7-list>
      </f7-tab>
      <f7-tab id="tab2">发现列表</f7-tab>
    </f7-tabs>
    <div class="preloader">
  <span class="preloader-inner">
    <span class="preloader-inner-gap"></span>
    <span class="preloader-inner-left">
        <span class="preloader-inner-half-circle"></span>
    </span>
    <span class="preloader-inner-right">
        <span class="preloader-inner-half-circle"></span>
    </span>
  </span>
    </div>
  </f7-page>
</template>

<script>
  import Config from "../js/config";
  import Book from "../js/book";
  export default {
      data:function(){
        return {
          theData:"" ,
          showloading:true
        }
      },
      mounted:function(){
        var book = new Book();
        console.log(book.toJson());

        var c  = new Config();
        var f7 = this.$f7;
        var that = this;
        f7.preloader.show();
        var url = c.baseUrl +"/book/getall/1,2,3";
        this.$ajax({
          method:"get",
          url:url
        }).then(function (res) {
          if (res.status ==200){
            that.theData = res.data.data;
            f7.preloader.hide();
          }
        })
      },
      methods:{

      }

    }

</script>

<style scoped>
  .bookshelf{
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .list {
    margin-top: 0px !important;
  }
</style>
